{{ define "js" }}
{{ end }}

{{ define "css" }}
  <style>
    .epoch__container {
      position: relative;
      display: flex;
      padding: 0 1rem;
      justify-content: space-between;
      align-items: center;
      flex-direction: row !important;
      padding: 0.5rem 1rem;
      margin: 1rem auto;
    }

    .epoch__container > a,
    .epoch__container > div {
      position: relative;
      margin: 0 1rem;
      border-radius: 5px;
      box-shadow: inset 1px 1px 2px var(--shadow-light), inset -1px -1px 2px var(--shadow-light);
      flex: 1 1 30px;
      max-width: 80px;
    }

    .epoch__container > a:hover {
      transition: background 0.25s ease;
      background: var(--linear-gradient) !important;
    }

    .epoch__container > a > div,
    .epoch__container > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: var(--font-color);
    }

    .epoch__container img {
      width: 30px;
      height: 30px;
    }

    .epoch__current {
      font-size: 1.2rem;
      border-radius: 5px;
      background: var(--linear-gradient);
    }

    .epoch__current img {
      width: 40px !important;
      height: 40px !important;
    }

    .epoch__next .epoch__next-loading {
      position: relative;
    }

    .epoch__next-loading::after {
      position: absolute;
      content: "...";
      animation: dots 3s linear infinite;
      left: 50%;
      transform: translateX(-50%);
    }

    @keyframes dots {
      0% {
        content: "..";
      }
      20% {
        content: ".";
      }
      40% {
        content: "";
      }
      60% {
        content: ".";
      }
      80% {
        content: "..";
      }
      100% {
        content: "...";
      }
    }
  </style>
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0">
            <!-- {{ if or (gt .PreviousEpoch 0) (eq .Epoch 1) }}
              <a href="/epoch/{{ .PreviousEpoch }}"><i class="fa fa-chevron-left"></i></a>
            {{ end }} -->
            <span class="ml-1 mr-1"><i class="fas fa-history mr-2"></i>Epoch Details</span>
            <!-- {{ if gt .NextEpoch 0 }}
              <a href="/epoch/{{ .NextEpoch }}"><i class="fa fa-chevron-right"></i></a>
            {{ end }} -->
          </h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb font-size-1 mb-0" style="padding: 0; background-color: transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item"><a href="/epochs" title="Epochs">Epochs</a></li>
              <li class="breadcrumb-item active" aria-current="page">Epoch Details</li>
            </ol>
          </nav>
        </div>
      </div>
      <div class="epoch__container card card-header">
        {{ if or (gt .PreviousEpoch 0) (eq .Epoch 1) }}
          <a href="/epoch/{{ .PreviousEpoch }}">
            <div class="epoch__pervious">
              <img src="/img/apps.png" alt="" />
              <span>{{ formatAddCommas .PreviousEpoch }}</span>
            </div>
          </a>
          <i class="fas fa-arrow-left"></i>
        {{ else }}
          <a style="visibility: hidden;" href="/epoch/{{ .PreviousEpoch }}">
            <div class="epoch__pervious">
              <img src="/img/apps.png" alt="" />
              <span>{{ formatAddCommas .PreviousEpoch }}</span>
            </div>
          </a>
          <i style="visibility: hidden;" class="fas fa-arrow-left"></i>
        {{ end }}
        <div class="epoch__current">
          <img src="/img/apps.png" alt="" />
          <span>{{ formatAddCommas .Epoch }}</span>
        </div>
        <i class="fas fa-arrow-right"></i>
        {{ if gt .NextEpoch 0 }}
          <a href="/epoch/{{ .NextEpoch }}">
            <div class="epoch__next">
              <img src="/img/apps.png" alt="" />
              <span>{{ formatAddCommas .NextEpoch }}</span>
            </div>
          </a>
        {{ else }}
          <a href="/epoch/{{ addUI64 .Epoch 1 }}">
            <div class="epoch__next">
              <img src="/img/apps.png" alt="" />
              <span class="epoch__next-loading">&nbsp;</span>
            </div>
          </a>
        {{ end }}
      </div>
      <div class="card">
        <div class="card-body px-0 py-1">
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Epoch:</div>
            <div class="col-md-9">{{ formatAddCommas .Epoch }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Finalized:</div>
            <div class="col-md-9">
              {{ if .Finalized }}
                <span class="badge badge-pill bg-success text-white" style="font-size: 12px; font-weight: 500;">Yes</span>
              {{ else }}
                <span class="badge badge-pill bg-warning text-white" style="font-size: 12px; font-weight: 500;">No</span>
              {{ end }}
            </div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Time:</div>
            <div class="col-md-9 d-flex justify-between flex-wrap">
              {{ template "timestamp" .Ts }}
            </div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">
              <span>Attestations:</span>
            </div>
            <div class="col-md-9">{{ if or .Finalized .AttestationsCount }}{{ formatAddCommas .AttestationsCount }}{{ else }}Calculating…{{ end }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Deposits:</div>
            <div class="col-md-9">{{ if or .Finalized .DepositsCount }}{{ .DepositsCount }}{{ else }}Calculating…{{ end }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Withdrawals:</div>
            <div class="col-md-9">{{ .WithdrawalCount }} <span class="text-muted">({{ .WithdrawalTotal }})</span></div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Slashings <span data-toggle="tooltip" data-placement="top" title="Proposers">P</span> / <span data-toggle="tooltip" data-placement="top" title="Attesters">A</span>:</div>
            <div class="col-md-9">{{ if or .Finalized .ProposerSlashingsCount }}{{ .ProposerSlashingsCount }}{{ else }}…{{ end }} / {{ if or .Finalized .AttesterSlashingsCount }}{{ .AttesterSlashingsCount }}{{ else }}…{{ end }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Voting Participation:</div>
            <div class="col-md-9">
              <div>
                {{ if or .Finalized .VotedEther }}
                  {{ formatBalance .VotedEther $.Rates.SelectedCurrency }} of
                  {{ formatBalance .EligibleEther $.Rates.SelectedCurrency }}
                  <small class="text-muted ml-1">({{ formatPercentageWithPrecision .GlobalParticipationRate 1 }} %)</small>
                {{ else }}
                  Calculating… (total stake: {{ formatBalance .EligibleEther $.Rates.SelectedCurrency }})
                {{ end }}
              </div>
              <div class="progress" style="height: 5px; width: 250px;">
                <div class="progress-bar" role="progressbar" style="width: {{ .GlobalParticipationRate | formatPercentage }}%;" aria-valuenow="{{ .GlobalParticipationRate | formatPercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Sync Participation:</div>
            <div class="col-md-9">
              <div>{{ formatPercentageWithPrecision .SyncParticipationRate 1 }} % (only counting proposed blocks)</div>
              <div class="progress" style="height: 5px; width: 250px;">
                <div class="progress-bar" role="progressbar" style="width: {{ .SyncParticipationRate | formatPercentage }}%;" aria-valuenow="{{ .SyncParticipationRate | formatPercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Validators:</div>
            <div class="col-md-9">{{ formatAddCommas .ValidatorsCount }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Avg. Validator Balance:</div>
            <div class="col-md-9">{{ formatBalance .AverageValidatorBalance $.Rates.SelectedCurrency }}</div>
          </div>
          <div class="row p-3 mx-0 collapsed">
            <div style="position:relative" class="col-md-3">Slots:</div>
            <div class="col-md-9">
              {{ if or .Finalized .BlocksCount }}
                {{ .BlocksCount }}
              {{ else }}
                Calculating…
              {{ end }}
              <small class="text-muted"> ({{ if gt .ProposedCount 0 }}{{ .ProposedCount }} Proposed{{ end }}{{ if gt .MissedCount 0 }}, {{ .MissedCount }} Missed{{ end }}{{ if gt .ScheduledCount 0 }}, {{ .ScheduledCount }} Pending{{ end }}{{ if gt .OrphanedCount 0 }}, {{ .OrphanedCount }} Orphaned{{ end }}) </small>
            </div>
          </div>
        </div>
      </div>

      <div id="epoch-blocks" class="card my-3 py-0 collapse show">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>Slot</th>
                  <th>Status</th>
                  <th>Time</th>
                  <th>Proposer</th>
                  <th>Root Hash</th>
                  <th>Attestations</th>
                  <th>Sync Participation</th>
                  <th>
                    <span data-toggle="tooltip" data-placement="top" title="Deposits">D<span class="d-none d-lg-inline">eposits</span> <i class="d-lg-none far fa-arrow-alt-circle-down"></i></span> / <span data-toggle="tooltip" data-placement="top" title="Withdrawals">W<span class="d-none d-lg-inline">ithdrawals</span> <i class="d-lg-none far fa-arrow-alt-circle-up"></i></span>
                  </th>
                  <th>Slashings <span data-toggle="tooltip" data-placement="top" title="Proposers">P</span> / <span data-toggle="tooltip" data-placement="top" title="Attesters">A</span></th>
                  <th>Exits</th>
                </tr>
              </thead>
              <tbody>
                {{ range .Blocks }}
                  <tr>
                    <td><a href="/slot/{{ .Slot }}">{{ formatAddCommas .Slot }}</a></td>
                    <td class="text-capitalize">{{ formatBlockStatus .Status .Slot }}</td>
                    <td aria-ethereum-date="{{ .Ts.Unix }}" aria-ethereum-date-format="FROMNOW">{{ .Ts.Format "2006-01-02T15:04:05" }}</td>
                    <td><a href="/validator/{{ .Proposer }}">{{ .ProposerFormatted }}</a></td>
                    <td class="d-flex align-items-center text-monospace">
                      {{ if eq .Status 1 }}
                        <a href="/slot/{{ printf "%x" .BlockRoot }}">0x{{ printf "%.4x" .BlockRoot }}...</a>
                        <i class="fa fa-copy text-muted p-1" role="button" data-toggle="tooltip" title="Copy to clipboard" data-clipboard-text="0x{{ printf "%x" .BlockRoot }}"></i>
                      {{ else }}
                        N/A
                      {{ end }}
                    </td>
                    <td>{{ .Attestations }}</td>
                    <td>{{ formatPercentageWithPrecision .SyncAggParticipation 2 }}%</td>
                    <td>{{ .Deposits }} / {{ .Withdrawals }}</td>
                    <td>{{ .Proposerslashings }} / {{ .Attesterslashings }}</td>
                    <td>{{ .Exits }}</td>
                  </tr>
                {{ end }}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
